<template>
  <div>
    <el-form v-model="config">
      <el-tabs>
        <el-tab-pane label="初始化数据">
          <el-form-item label="接口地址">
            <el-input v-model="config.initData.apiUrl"></el-input>
          </el-form-item>
          <el-form-item label="method">
            <el-input v-model="config.initData.method"></el-input>
          </el-form-item>
          <el-form-item label="结果字段">
            <el-input v-model="config.initData.dataField"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="提交数据">
          <el-form-item label="接口地址">
            <el-input v-model="config.submitData.apiUrl"></el-input>
          </el-form-item>
          <el-form-item label="method">
            <el-input v-model="config.submitData.method"></el-input>
          </el-form-item>
          <el-form-item label="数据字段">
            <el-input v-model="config.submitData.dataField"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="表单项">
          <el-form-item label="统一标签宽度">
            <el-input v-model="config.forms.labelWidth"></el-input>
          </el-form-item>
          <el-button @click="add">添加</el-button>
          <el-table :data="config.items" border style="width: 100%">
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="字段" prop="dataField"></el-table-column>
            <el-table-column label="字段类型" prop="dataType"></el-table-column>
            <el-table-column label="显示类型" prop="showType"></el-table-column>
             <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">              
                <el-button v-if="scope.$index>0" type="text" size="small" @click="up(config.items,scope.$index)">上移</el-button>
                <el-button v-if="scope.$index<config.items.length-1" type="text" size="small" @click="down(config.items,scope.$index)">下移</el-button>                              
                <el-button type="text" size="small" @click="edit(scope)">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>        
        <el-tab-pane label="预览">
          <form-comp-vue :configa="config" :isTest="true"></form-comp-vue>
        </el-tab-pane>
      </el-tabs>
      <el-button @click="save">确定</el-button>
    </el-form>

    <el-dialog :visible.sync="showaddDialog">
      <el-form v-model="tempitem">
        <el-form-item label="名称">
          <el-input v-model="tempitem.name"></el-input>
        </el-form-item>
        <el-form-item label="字段">
          <el-input v-model="tempitem.dataField"></el-input>
        </el-form-item>
        <el-form-item label="提示语">
          <el-input v-model="tempitem.tooltip"></el-input>
        </el-form-item>
        <el-form-item label="条件展示">
          <el-input v-model="tempitem.if"></el-input>
        </el-form-item>
        <el-form-item label="字段类型">
          <el-select v-model="tempitem.dataType">
            <el-option v-for="x in dataTypes" :label="x" :value="x" :key="x"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示方式">
          <el-select v-model="tempitem.showType">
            <el-option v-for="x in showTypes" :label="x.label" :value="x.id" :key="x.id"></el-option>
          </el-select>
          <!-- {{tempitem.showConfig}} -->
          <editor ref="editor" v-if="tempitem.showType>0" :id="tempitem.showType" v-model="tempitem.showConfig"></editor>
        </el-form-item>
        <!-- <el-form-item label="验证项">
          表格，可添加
        </el-form-item> -->
        <validator-editor v-model="tempitem.rules"></validator-editor>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showaddDialog = false">取 消</el-button>
        <el-button type="primary" @click="doAdd">确 定{{editIndex}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import editor from '../editors/componentPropertiesEditor.vue'
import formCompVue from '../components/formComp.vue'
import validatorEditor from '../editors/validatorEditor.vue'
export default {
  components:{editor,formCompVue,validatorEditor},
  async created(){
    var rep=await axios.get("http://localhost:8811/api/ShowTypeComponente/GetAll")    
    this.showTypes=rep.data.result    

    var id=this.$route.params.id
    var url="http://localhost:8811/api/DynamicPage/GetOne/"+id
    var rep=await axios.get(url)
    var conf=rep.data.result.pageConfig    
    if(conf==null || conf==undefined){}
    else{
      this.config=JSON.parse(conf)
      
    }
  },
  methods:{
    up(arr,index){
      if(index<1) return
      var temp=arr[index]
      this.$set(arr,index,arr[index-1])
      this.$set(arr,index-1,temp)
    },
    down(arr,index){
      if(index>=arr.length) return
      var temp=arr[index]
      this.$set(arr,index,arr[index+1])
      this.$set(arr,index+1,temp)
    },
    async save(){
      console.log(this.config);
      var id=this.$route.params.id
      var url="http://localhost:8811/api/dynamicpage/updateconfig/"
      await axios.post(url,{id:id,pageConfig:JSON.stringify(this.config)}).then(rep=>{
        this.$message({
          message: 'updated',
          type: 'success'
        });
      })
    },
    add(){
      this.showaddDialog=true
      this.tempitem={
        rules:[]
      }
      this.editIndex=-1
    },
    edit(scope){
      var id=scope.$index
      this.showaddDialog=true
      this.tempitem=this.config.items[id]
      this.editIndex=id
    },
    doAdd(){
      if(this.editIndex<0){
        this.config.items.push(this.tempitem)
      }
      else{
        this.config.items[this.editIndex]=this.tempitem
      }

      this.showaddDialog=false
    }
  },
  data(){
    return {
      editIndex:-1,
      showaddDialog:false,
      dataTypes:["string","number","date","bool","array"],
      showTypes:[],
      tempitem:{
        name:"",
        dataField:"",
        dataType:"",
        rules:[]
      }, //添加或编辑表单项 时的临时对象
      config:{
        initData:{},
        submitData:{},
        forms:{},
        items:[]
      } //实际存库数据
    }
  }
}
</script>

<style>

</style>